.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10;
    transition: all 0.5s;
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    &.slide-enter-active {
      top: 0;
    }
    &.slide-leave-active {
      top: -100%;
    }
    &.slide-enter {
      top: -100%;
    }
    .modal-dialog {
      width: 660px;
      min-height: auto;
      max-height: 460px;
      background-color: #ffffff;
      border-radius: 6px;
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, 0);
      &.small {
        width: 350px;
      }
      &.medium {
        width: 450px;
      }
      .modal-header {
        padding: 15px;
        .alignCenter(flex, center, space-between);
        border-bottom: 1px solid @border-color-light;
        .title {
          font-size: 16px;
          color: @color-text-primary;
        }
        .iconfont {
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 12px;
          color: #848692;
          cursor: pointer;
          &:hover {
            color: #000000;
          }
        }
      }
      .modal-body {
        max-height: 316px;
        overflow-y: auto;
        padding: 15px;
      }
      .modal-footer {
        padding: 15px;
        text-align: right;
        border-top: 1px solid @border-color-light;
      }
    }
  }
  